<!-- 外框 -->
<div id="waik">
  <!-- 头部 -->
  <!-- 头部 -->
  <div id="top" style="background: #fff">
    <div class="sos_t sos_t_zy">
      <div class="fanh_shang fanh_yems">
        <a href="javascript:;" onclick="history.back();"
          ><img src="../../assets/images/list_xq_jiant1.png"
        /></a>
      </div>
      <div class="text">我的订单</div>
      <div class="right">
        <!-- <div class="zd"><a href="#">客服</a></div>  -->
      </div>
    </div>
  </div>

  <!-- 内容 -->
  <div class="zy_module_content">
    <div class="swiper-container vip_user_order">
      <!-- top nav -->
      <div class="order_nav dis_flex"></div>
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <ul>
            <li routerLink="/my-dd-list-xq">
              <div class="vip_order_goods">
                <h2>
                  <a href="javascript:;"
                    ><img src="../../assets/images/toux.jpg" />创意格式广告</a
                  >
                </h2>
                <h3>
                  <a href="javascript:;">
                    <i
                      ><img src="../../assets/images/shouye_list_two5.jpg"
                    /></i>
                    <dl>
                      <dt>3D字体发光字、水晶字公司前台放置文化墙字</dt>
                      <dd>
                        <em>50*50cm/ 人工水晶/发光效果</em
                        ><!-- <em>40</em> -->
                      </dd>
                    </dl>
                  </a>
                  <p>
                    <span>￥645.00</span>
                    <em>X1</em>
                  </p>
                </h3>
              </div>
              <div class="order_btn">
                共5件商品：￥42.00
                <span>已完成</span>
                <a href="my_dd_list.html#">评价</a>
              </div>
            </li>
            <li routerLink="/my-dd-list-xq">
              <div class="vip_order_goods">
                <h2>
                  <a href="javascript:;"
                    ><img src="../../assets/images/toux.jpg" />创意格式广告
                  </a>
                </h2>
                <h3>
                  <a href="javascript:;">
                    <i
                      ><img src="../../assets/images/shouye_list_two4.jpg"
                    /></i>
                    <dl>
                      <dt>3D字体发光字、水晶字公司前台放置文化墙字</dt>
                      <dd>
                        <em>50*50cm/ 人工水晶/发光效果</em
                        ><!-- <em>40</em> -->
                      </dd>
                    </dl>
                  </a>
                  <p>
                    <span>￥645.00</span>
                    <em>X1</em>
                  </p>
                </h3>
              </div>
              <div class="order_btn">
                共5件商品：￥42.00
                <span>已完成</span>
                <a href="my_dd_list.html#">交易中</a>
              </div>
            </li>
            <li routerLink="/my-dd-list-xq">
              <div class="vip_order_goods">
                <h2>
                  <a href="javascript:;"
                    ><img src="../../assets/images/toux.jpg" />创意格式广告
                  </a>
                </h2>
                <h3>
                  <a href="javascript:;">
                    <i
                      ><img src="../../assets/images/shouye_list_two5.jpg"
                    /></i>
                    <dl>
                      <dt>3D字体发光字、水晶字公司前台放置文化墙字</dt>
                      <dd>
                        <em>50*50cm/ 人工水晶/发光效果</em
                        ><!-- <em>40</em> -->
                      </dd>
                    </dl>
                  </a>
                  <p>
                    <span>￥645.00</span>
                    <em>X1</em>
                  </p>
                </h3>
              </div>
              <div class="order_btn">
                共5件商品：￥42.00
                <span>已完成</span>
                <a href="my_dd_list.html#">评价</a>
              </div>
            </li>
            <li routerLink="/my-dd-list-xq">
              <div class="vip_order_goods">
                <h2>
                  <a href="javascript:;"
                    ><img src="../../assets/images/toux.jpg" />创意格式广告
                  </a>
                </h2>
                <h3>
                  <a href="javascript:;">
                    <i
                      ><img src="../../assets/images/shouye_list_two4.jpg"
                    /></i>
                    <dl>
                      <dt>3D字体发光字、水晶字公司前台放置文化墙字</dt>
                      <dd>
                        <em>50*50cm/ 人工水晶/发光效果</em
                        ><!-- <em>40</em> -->
                      </dd>
                    </dl>
                  </a>
                  <p>
                    <span>￥645.00</span>
                    <em>X1</em>
                  </p>
                </h3>
              </div>
              <div class="order_btn">
                共5件商品：￥42.00
                <span>已完成</span>
                <a href="my_dd_list.html#">交易中</a>
              </div>
            </li>
          </ul>
          <div class="my_list_feny">
            <a>上一页</a>
            <span>1/3</span>
            <a>上一页</a>
          </div>
        </div>
        <div class="swiper-slide">交易中</div>
        <div class="swiper-slide">已完成</div>
        <div class="swiper-slide">待评价</div>
      </div>
    </div>
    <!-- <script>
          var swiper = new Swiper('.vip_user_order', {
              autoHeight: true, //enable auto height
              // pagination: '.order_nav',
              pagination: {
                  el: '.order_nav',
                  clickable :true,
                  renderBullet: function (index, className) {
              switch(index){
                  case 0:text='全部';break;
                  case 1:text='交易中';break;
                  case 2:text='已完成';break;
                  case 3:text='待评价';break; 
              }
            return '<a class="' + className + '">' + text + '</a>';
          },
              },
              
              // paginationClickable: true,
              // paginationBulletRender: function (swiper,index, className) {
              // switch (index) {
              //     case 0: name='全部';break; 
              //     case 1: name='待付款';break;
              //     case 2: name='待发货';break;
              //     case 3: name='已成交';break;
              //     default: name='';
              // }
              //         return '<a class="' + className + '">' + name + '</a>';
              //     }
              
          });
      </script> -->
  </div>
  <br />
  <br />
  <br />

  <!-- 底部导航 -->
  <!-- 外框结束div -->
</div>
